
<template>
  <main-container headerText="订单管理  >> 普消订单管理">
    <div class="content" :key="showPageKey">
      <!-- 操作栏 -->
      <div class="top-option">
        <div class="left-box">
          <div class="sub">
            <div class="inline-block">
              <label for>订单号</label>
            </div>
            <div class="inline-block">
              <el-input
                v-model="formData.orderNo"
                placeholder="请输入"
                style="width: 150px"
                size="small"
              ></el-input>
            </div>
          </div>

          <div class="sub">
            <div class="inline-block">
              <label for>收货人</label>
            </div>
            <div class="inline-block">
              <el-input
                v-model="formData.linkMan"
                placeholder="请输入"
                style="width: 150px"
                size="small"
              ></el-input>
            </div>
          </div>

          <!-- <div class="sub" style="width: 300px">
            <div class="inline-block">
              <label for>收货人手机号</label>
            </div>
            <div class="inline-block">
              <el-input
                v-model="formData.linkTel"
                placeholder="请输入"
                style="width: 150px"
                size="small"
              ></el-input>
            </div>
          </div> -->

          <div class="sub" style="width: 500px">
            <date-search
              lableName="下单时间"
              :tThis="this"
              labelWidth="80px;"
              dateWidth="150px;"
              @dateChange="handleOrderCreatedDateChange"
            />
          </div>
        </div>

        <div class="right-box">
          <div class="sub">
            <el-button @click="handleSearch" type="primary">查询</el-button>
          </div>
        </div>
      </div>

      <div class="drawer-list" v-if="tableData.length > 0">
        <div
          class="list-item J_drawerItem"
          :class="['J_drawerItem' + index, index == 0 ? 'active' : '']"
          v-for="(item, index) in tableData"
          :key="index"
          :data-index="index"
        >
          <div class="item-title J_click_head" :data-index="index">
            <div class="title-left">
              <div class="icon">
                <img src="../../static/arrow.png" alt="右箭头" />
              </div>
              <div class="info">
                <span style="display: inline-block; margin-left: 30px"
                  >订单号：{{ item.orderNo }}</span
                >
                <span style="display: inline-block; margin-left: 30px"
                  >下单时间：{{ item.gmtCreated }}</span
                >
                <span style="display: inline-block; margin-left: 30px"
                  >类型：{{ storeShows[item.merchantId] }}</span
                >
              </div>
            </div>
            <div class="title-right">
              <!-- merchantId 是京东商家 -->
              <el-button
                class="send-btn"
                type="primary"
                @click.stop="buyJDorderF"
                size="small"
                :data-id="item.id"
                v-if="item.merchantId == '2'"
                >京东下单</el-button
              >

              <el-button
                class="send-btn"
                type="primary"
                @click="openDeliverGoodsFunc"
                size="small"
                :data-id="item.id"
                >发货</el-button
              >

              <!-- :data-id="scope.row.id" -->
            </div>
          </div>
          <div class="item-content">
            <div class="content-left">
              <div class="goods-list">
                <div
                  v-show="item.goodList.length > 0"
                  class="goods-list-item"
                  v-for="(goodsItem, idx) in item.goodList"
                  :key="idx"
                >
                  <div class="goods-img-box">
                    <img
                      v-if="goodsItem.goodImg"
                      :src="goodsItem.goodImg"
                      alt="商品图"
                    />
                    <img
                      v-else
                      src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596137144580&di=4cc76a1b1b595de354ddd02256ed27a8&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3427169086%2C3097665420%26fm%3D214%26gp%3D0.jpg"
                      alt="商品图"
                    />
                  </div>
                  <div class="goods-img-detail">
                    <div class="goods-name-text">{{ goodsItem.goodName }}</div>
                    <div>商品数量：{{ goodsItem.num }}</div>
                    <div>
                      商品价格：￥{{ Number(goodsItem.price) * goodsItem.num }}
                    </div>
                  </div>
                </div>
                <div v-show="item.goodList.length == 0" class="show-no-goods">
                  暂无商品信息
                </div>
              </div>
            </div>
            <div class="content-right">
              <div class="strong">买家</div>
              <div class="buy-box">
                <!-- <span>下单用户ID：{{ item.userId }}</span> -->
                <!-- <span style="display: inline-block; margin-left: 30px"
                  >账号：{{ item.account }}</span
                > -->
                <span style="display: inline-block"
                  >订单总金额：￥{{ item.orderAmount }}</span
                >
              </div>
              <div class="strong">收货人</div>
              <div class="receive-man">
                <div>
                  <span>收货人：{{ item.linkMan }}</span>
                  <span style="display: inline-block; margin-left: 30px"
                    >收货人手机号码：{{ item.linkTel }}</span
                  >
                </div>
                <div>收件人地址：{{ item.addr }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="no-data">暂无数据</div>

      <!-- 列表栏 -->
      <!-- <div class="list">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          class="tableBox"
          @selection-change="handleSelectionChange"
          :border="true"
        >
          <el-table-column label="序号" prop="index"></el-table-column>
          <el-table-column label="订单号" prop="orderNo"></el-table-column>
          <el-table-column label="会员ID" prop="userId"></el-table-column>
          <el-table-column label="手机号码" prop="tel"></el-table-column>
          <el-table-column label="商品数量" prop="num"></el-table-column>
          <el-table-column label="订单总金额" prop="totalAmount"></el-table-column>
          <el-table-column label="收货人" prop="linkMan"></el-table-column>
          <el-table-column label="收件人手机号码" prop="linkTel"></el-table-column>
          <el-table-column label="状态" prop="orderStateName"></el-table-column>
          <el-table-column label="下单时间" prop="gmtCreated"></el-table-column>

          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                class="btn edit"
                type="primary"
                @click="openDeliverGoodsFunc"
                :data-id="scope.row.id"
                size="small"
              >发货</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>-->

      <!-- 分页 -->
      <div class="paging">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPageIdx"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="onePageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageCount"
          ></el-pagination>
        </div>

        <div class="confirm-btn">
          <el-button @click="handleEnter" size="small">确定</el-button>
        </div>
      </div>
      <!-- 分页 -->

      <!-- 输入弹窗 -->
      <div class="model-wrap" :class="isOpenModel ? 'active' : ''">
        <div class="edit-wrap" :class="isOpenModel ? 'active' : ''">
          <!-- 标题 -->
          <div class="title">填写物流信息</div>
          <!-- 输入框组 -->
          <div class="top-input">
            <div class="item">
              <label for> <span class="tips"></span> 物流公司： </label>
              <div class="inline-block">
                <el-select
                  v-model="expressCode"
                  placeholder="请选择快递公司"
                  size="small"
                  style="width: 200px"
                  @change="handleSelect"
                >
                  <el-option
                    v-for="(item, index) in expressCompanyArr"
                    :key="index"
                    :label="item.com"
                    :value="item.no"
                  ></el-option>
                </el-select>
              </div>
            </div>

            <div class="item tips-item">
              <span class="tips"></span>
            </div>

            <div class="item">
              <label for> <span class="tips"></span> 物流单号： </label>
              <div class="inline-block">
                <el-input
                  v-model="waybillNo"
                  placeholder="请输入"
                  size="small"
                  style="width: 200px"
                ></el-input>
              </div>
            </div>
          </div>

          <div class="submit-option">
            <el-button
              class="el-btn"
              @click.stop="handleDeliver"
              style="
                width: 80px;
                height: 30px;
                padding-top: 8px;
                color: #101010;
              "
              >发货</el-button
            >
            <el-button
              class="el-btn"
              @click="cancelFunc"
              style="
                width: 80px;
                height: 30px;
                padding-top: 8px;
                color: #101010;
              "
              >取消</el-button
            >
          </div>
        </div>
      </div>

      <!-- 输入弹窗 -->
    </div>
  </main-container>
</template>


<script>
import mainContainer from "@/components/main_container";
import input_search from "@/components/subCon/inputSearch";
import select_search from "@/components/subCon/selectSearch";
import date_search from "@/components/subCon/dateSearch";

import common from "@/utils/tools"; //工具函数
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

export default {
  name: "advertisement",
  components: {
    "main-container": mainContainer,
    "input-search": input_search,
    "select-search": select_search,
    "date-search": date_search,
  },
  data() {
    return {
      //分页相关
      currentPageIdx: 1, //当前页与跳转框的初始值
      pageCount: 1, //总条数
      onePageSize: 10, //每页的条数

      formData: {
        linkMan: "",
        linkTel: "",
        orderNo: "",
        startDate: "",
        endDate: "",
      },
      //输入
      addr: "",
      tel: "",
      dateChooseArr: [],

      showPageKey: 100,

      storeShows: {
        1: "自营",
        2: "京东",
      },

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      //列表
      tableData: [],
      //抽屉列表
      activeName: "1", //当前打开
      //按钮
      curBtnIndex: "",
      //输入弹窗
      isOpenModel: false,
      waybillNo: "", //快递单号
      timer: "",
      curId: "", //当前发货id

      infoData: {
        userId: "13812345678",
        account: "小五",
        tel: "13812345678",
      },
      //发货状态
      orderStateShow: {
        show: "",
      },
      expressCode: "", //快递公司代码
      expressName: "", //快递公司名
      expressCompanyArr: [
        // { name: "顺丰", code: "shunfeng" },
        // { name: "申通", code: "shentong" },
        // { name: "圆通", code: "yuantong" },
        // { name: "中通", code: "zhongtong" },
        // { name: "汇通", code: "huitongkuaidi" },
        // { name: "百世汇通", code: "baishiwuliu" },
        // { name: "韵达", code: "yunda" },
        // { name: "宅急送", code: "zhaijisong" },
        // { name: "天天", code: "tiantian" },
        // { name: "德邦", code: "debangwuliu" },
        // { name: "EMS", code: "ems" },
        // { name: "邮政包裹/平邮", code: "youzhengguonei" },
        {
          com: "顺丰",
          no: "sf",
        },
        {
          com: "申通",
          no: "sto",
        },
        {
          com: "圆通",
          no: "yt",
        },
        {
          com: "韵达",
          no: "yd",
        },
        {
          com: "天天",
          no: "tt",
        },
        {
          com: "EMS",
          no: "ems",
        },
        {
          com: "中通",
          no: "zto",
        },
        {
          com: "汇通（百世快递）",
          no: "ht",
        },
        {
          com: "全峰",
          no: "qf",
        },
        {
          com: "德邦",
          no: "db",
        },
        {
          com: "自动匹配",
          no: "auto",
        },
        {
          com: "国通",
          no: "gt",
        },
        {
          com: "如风达",
          no: "rfd",
        },
        {
          com: "京东快递",
          no: "jd",
        },
        {
          com: "宅急送",
          no: "zjs",
        },
        {
          com: "EMS国际",
          no: "emsg",
        },
        {
          com: "Fedex国际",
          no: "fedex",
        },
        {
          com: "邮政国内（挂号信）",
          no: "yzgn",
        },
        {
          com: "UPS国际快递",
          no: "ups",
        },
        {
          com: "中铁快运",
          no: "ztky",
        },
        {
          com: "佳吉快运",
          no: "jiaji",
        },
        {
          com: "速尔快递",
          no: "suer",
        },
        {
          com: "信丰物流",
          no: "xfwl",
        },
        {
          com: "优速快递",
          no: "yousu",
        },
        {
          com: "中邮物流",
          no: "zhongyou",
        },
        {
          com: "天地华宇",
          no: "tdhy",
        },
        {
          com: "安信达快递",
          no: "axd",
        },
        {
          com: "快捷速递",
          no: "kuaijie",
        },
        {
          com: "AAE全球专递",
          no: "aae",
        },
        {
          com: "DHL",
          no: "dhl",
        },
        {
          com: "DPEX国际快递",
          no: "dpex",
        },
        {
          com: "D速物流",
          no: "ds",
        },
        {
          com: "FEDEX国内快递",
          no: "fedexcn",
        },
        {
          com: "OCS",
          no: "ocs",
        },
        {
          com: "TNT",
          no: "tnt",
        },
        {
          com: "东方快递",
          no: "coe",
        },
        {
          com: "传喜物流",
          no: "cxwl",
        },
        {
          com: "城市100",
          no: "cs",
        },
        {
          com: "城市之星物流",
          no: "cszx",
        },
        {
          com: "安捷快递",
          no: "aj",
        },
        {
          com: "百福东方",
          no: "bfdf",
        },
        {
          com: "程光快递",
          no: "chengguang",
        },
        {
          com: "递四方快递",
          no: "dsf",
        },
        {
          com: "长通物流",
          no: "ctwl",
        },
        {
          com: "飞豹快递",
          no: "feibao",
        },
        {
          com: "马来西亚（大包EMS）",
          no: "malaysiaems",
        },
        {
          com: "安能快递",
          no: "ane66",
        },
        {
          com: "中通快运",
          no: "ztoky",
        },
        {
          com: "远成物流",
          no: "ycgky",
        },
        {
          com: "远成快运",
          no: "ycky",
        },
        {
          com: "邮政快递",
          no: "youzheng",
        },
        {
          com: "百世快运",
          no: "bsky",
        },
        {
          com: "苏宁快递",
          no: "suning",
        },
        {
          com: "安能物流",
          no: "anneng",
        },
        {
          com: "九曳",
          no: "jiuye",
        },
        {
          com: "品骏快递",
          no: "pjbest",
        },
        {
          com: "壹米滴答",
          no: "ymdd",
        },
        {
          com: "极兔快递",
          no: "jitu",
        },
        {
          com: "佐川急便",
          no: "zuochuan",
        },
        {
          com: "同城快寄",
          no: "shpost",
        },
        {
          com: "众邮快递",
          no: "zhongyouex",
        },
      ],
    };
  },
  mounted() {
    this.allMethods = this.getAllMethods();
    //页面数据重置 1
    if (this.recoverSearchF) {
      this.recoverSearchF({ _this: this });
    }
    this.initRequest();
    this.getInitData();
  },
  methods: {
    /* 去京东下单 */
    buyJDorderF() {
      console.log(this.api2.jd_order.jd_make_order);

      this.tools.basePost({
        url: this.api2.jd_order.jd_make_order,
        success: (res) => {},
      });
    },

    //绑定事件
    bindEvent(timer) {
      setTimeout(() => {
        $(".J_click_head").click((e) => {
          var idx = e.currentTarget.dataset.index;
          this.curBtnIndex = idx;
          // $(".J_drawerItem" + idx);
          // var class =  $(".J_drawerItem" + idx).
          $(".J_drawerItem" + idx).toggleClass("active");
        });
      }, timer || 600);
    },

    //打开发货
    openDeliverGoodsFunc(e) {
      const id = e.currentTarget.dataset.id;
      setTimeout(() => {
        $(".J_drawerItem" + this.curBtnIndex).toggleClass("active");
      });
      this.curId = id;
      this.waybillNo = ""; //快递单号
      this.expressCode = "";

      //修改当前发货id值
      this.isOpenModel = true;
    },

    //同步物流公司
    handleGetCompany() {
      clearTimeout(this.timer);
      if (this.waybillNo == "") {
        this.expressCode = "";
        return;
      }
      this.timer = setTimeout(() => {
        let url = API.order_manager.ping_tuan_page;
        let data = {
          waybillNo: this.waybillNo,
        };
        console.log("参数", data);
        this.tools.get(
          url,
          data,
          null,
          (res) => {
            let data = JSON.parse(res.data);
            console.log("结果", res);
            if (res.result == false) {
              this.$message({
                type: "error",
                message: "自动识别未成功!",
              });
            }
            if (data.result) {
              this.expressCode = data.returnCode;
              for (var i = 0; i < this.expressCompanyArr.length; i++) {
                var item = this.expressCompanyArr[i];
                if (item.code == this.expressCode) {
                  this.expressName = item.name;
                  break;
                }
              }
            }
          },
          (err) => {
            console.log(err);
          }
        );
      }, 1000);
    },

    //选择物流公司
    handleSelect(val) {
      this.expressCompanyArr.forEach((item, index) => {
        if (item.no == val) {
          this.expressName = item.com;
        }
        console.log(this.expressCode, this.expressName);
      });
    },

    //发货
    handleDeliver(e) {
      if (!this.expressCode || !this.expressName || !this.waybillNo) {
        alert("请输入完整信息");
        return;
      }
      var url = API.order_m.send_goods;
      var data = {
        id: this.curId,
        logisticsCode: this.expressCode, //物流公司编号
        logisticsCompany: this.expressName, //物流公司
        trackingNum: this.waybillNo, //物流单号
      };
      console.log("发货p", data);
      this.tools.post(
        url,
        data,
        null,
        (res) => {
          console.log("发货res", res);
          if (res.message == "操作成功") {
            this.$message({
              type: "success",
              message: "发货成功",
            });
            this.$router.go(0); //先刷新，后期再改里面的
          } else {
            this.$message({
              type: "warning",
              message: "发货失败，请检查参数",
            });
          }
          this.isOpenModel = false;
        },
        (err) => {
          console.log(err);
        }
      );
    },

    //编辑
    handleEditItem(e) {
      const id = e.currentTarget.dataset.id;
      this.$router.push({
        name: "admin_manager_edit",
        query: { id: id },
      });
    },

    //删除
    handleDeleteItem(e) {
      const id = e.currentTarget.dataset.id;

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.changeDataItem(
            API.marketing_manager.advertisement_delete + id,
            {
              id: id,
            },
            (res) => {
              console.log(res);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              if (res.message == "操作成功") {
                this.getInitData(); //更新列表
              }
            },
            (err) => {
              console.log(err);
            }
          );
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //列表勾选切换
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    //列表改变勾选触发
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //打开弹窗 一般绑定别的函数
    openModel() {
      this.isOpenModel = true;
    },

    //取消
    cancelFunc() {
      this.isOpenModel = false;
    },

    //搜索
    handleSearch(e) {
      this.allMethods.handleSearch(e);
      this.bindEvent();
    },

    /* 方法抽离集合 */
    getAllMethods() {
      var _this = this;
      return {
        //查看
        handleView(e) {
          var { id } = e.currentTarget.dataset;
          _this.$router.push({
            path: "/member_manager_see_detail_member查看",
            query: { id },
          });
        },

        //查询
        handleSearch() {
          var { orderNo, startDate, endDate, linkMan } = _this.formData;

          //保存搜索条件
          _this.currentPageIdx = 1;
          //保存数据 2
          if (_this.saveSearchF) {
            _this.saveSearchF({ _this: _this });
          }

          _this.LingChuang_request.handleSearch({
            orderNo,
            startDate,
            endDate,
            linkMan,
            pageIndex: _this.currentPageIdx,
            pageSize: _this.onePageSize,
            orderState: 2, //待发货
            orderType: 2, //普消
          });
        },
      };
    },

    //日期选择
    handleOrderCreatedDateChange(dateArr, startDate, endDate) {
      this.formData.startDate = startDate;
      this.formData.endDate = endDate;
    },

    //表格默认函数
    //初始化
    initRequest() {
      this.LingChuang_request = jhTools.LingChuang_request({
        this: this,
        pageUrl: API.order_m.order_page,
        searchUrl: API.order_m.order_page,
        searchData: {},
      });
    },

    //加载数据
    getInitData: function () {
      var _this = this;
      this.LingChuang_request.getInitData(
        {
          pageIndex: this.currentPageIdx,
          pageSize: this.onePageSize,
          orderState: 2, //待发货
          orderType: 2, //普消
        },
        function (res) {
          _this.bindEvent();
        }
      );
    },
    //格式化数据
    formatData() {
      this.LingChuang_request.formatData();
    },
    //格式化页面
    formatPaging(res) {
      this.LingChuang_request.formatPaging(res);
    },
    //页数跳转
    handleSizeChange(val) {
      this.LingChuang_request.handleSizeChange(val);
      //分页数据 3
      if (this.saveSearchF) {
        this.saveSearchF({ _this: this });
      }
    },
    //页面点击跳转
    handleCurrentChange(val) {
      this.LingChuang_request.handleCurrentChange(val);
      //分页数据 3
      if (this.saveSearchF) {
        this.saveSearchF({ _this: this });
      }
    },
    //enter跳转
    handleEnter() {
      this.LingChuang_request.getPagingData(
        this.currentPageIdx,
        this.onePageSize
      );
      //分页数据 3
      if (this.saveSearchF) {
        this.saveSearchF({ _this: this });
      }
    },
    //分页数据
    getPagingData(pageIndex, pageSize) {
      this.LingChuang_request.handleEnter(pageIndex, pageSize);
    },
    //列表勾选1
    toggleSelection(rows) {
      this.LingChuang_request.toggleSelection(rows);
    },
    //列表勾选2
    handleSelectionChange(val) {
      this.LingChuang_request.handleSelectionChange(val);
    },
    //表格默认函数

    
    /* 恢复搜索状态 6 */
    recoverSearchF({ _this }) {
      _this.tools.recoverSearchF({
        _this: this,
        subItemName: "/order_m_normal_order_table",
      });
    },

    /* 保存搜索状态 7 */
    saveSearchF({ _this }) {
      _this.tools.saveSearchF({
        _this: this,
        subItemName: "/order_m_normal_order_table",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

/* 操作栏相关*/

.top-option {
  min-height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  // padding-bottom: 10px;
  margin: 10px;
  border: 1px solid #ddd;
  padding-bottom: 20px;

  .left-box {
    padding-left: 20px;
    max-width: calc(100% - 100px);

    .sub {
      float: left;
      width: 280px;
      margin-left: 10px;
      padding-top: 20px;

      .inline-block {
        display: inline-block;
        color: #333;
        font-size: 14px;
        label {
          display: inline-block;
          padding-right: 10px;
        }
      }
    }
  }

  .right-box {
    padding-right: 50px;
    min-width: 100px;

    .sub {
      float: right;
      margin-left: 10px;
      margin-top: 20px;
    }
  }
}

/* 操作栏相关*/
/* 输入弹窗样式*/

.content {
  position: relative;
  overflow-y: scroll;
}

.model-wrap {
  // height: 0;
  // position: fixed;
  // top: 8%;
  // left: 15%;
  // width: 100%;
  // background-color: rgba(0, 0, 0, 0.5);
  // z-index: 1;
  // transition: all 0.4s ease-in-out;
  // overflow: hidden;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;

  &.active {
    height: 100%;
    transition: all 0.4s ease-in-out;
  }
}

.edit-wrap {
  display: none;
  position: absolute;
  top: 45%;
  left: 45%;
  margin-left: -275px;
  margin-top: -175px;
  width: 550px;
  min-height: 353px;
  // border-radius: 10px;
  border: 1px solid #ddd;
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;

  &.active {
    display: block;
  }

  .title {
    font-size: 18px;
    height: 52px;
    line-height: 52px;
    color: #101010;
    border-bottom: 1px solid #ddd;
    background-color: #0099ff;
    padding-left: 20px;
    color: #fff;
  }

  .top-input {
    min-height: 247px;
    border-bottom: 1px solid #ddd;
    padding-top: 20px;
    box-sizing: border-box;

    .item {
      margin-top: 12px;
      margin-left: 72px;
      font-size: 14px;

      span {
        color: #f10;
      }

      &.img-item {
        position: relative;
      }

      label {
        display: inline-block;
        width: 95px;
        font-weight: normal;
        text-align: right;
      }

      .msg {
        padding-left: 0px;
      }

      .upload-img-box {
        position: absolute;
        top: 0;
        left: 60px;
        width: 107px;
        height: 107px;
        overflow: hidden;

        img {
          height: 100%;
        }
      }
    }

    .tips-item {
      padding-left: 20px;
    }
  }

  .submit-option {
    height: 53px;
    display: flex;
    justify-content: center;
    align-items: center;
    // padding-right: 14px;
  }
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

//调整element 样式
.inline-block {
  display: inline-block;
  margin-left: 22px;

  &.id {
    padding-left: 20px;
  }

  el-input {
    width: 20px !important;
  }
}

/* 输入弹窗样式*/

//抽屉
.drawer-list {
  margin: 0 10px;

  .list-item {
    font-size: 14px;
    font-family: Roboto;
    width: 100%;

    .item-title {
      width: 100%;
      height: 50px;
      background-color: #edf0f1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 0.5px solid #dedede;
      .title-left {
        height: 36px;
        display: flex;
        align-items: center;
        flex-direction: row;
        .icon {
          width: 30px;
          height: 30px;
          padding: 5px;
          box-sizing: border-box;
          transition: all 0.5s ease-in-out;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .info {
          height: 30px;
          span {
            display: inline-block;
            line-height: 30px;
          }
        }
      }

      .title-right {
        padding-right: 30px;
      }
    }

    &.active {
      .item-content {
        height: 199px;
        transition: all 0.5s ease-in-out;
      }
      .icon {
        transform: rotate(90deg);
        transition: all 0.5s ease-in-out;
      }
    }

    .item-content {
      display: flex;
      flex-direction: row;
      height: 0;
      transition: all 0.5s ease-in-out;
      overflow: hidden;

      .content-left {
        width: 50%;
        border: 1px solid #ddd;
        box-sizing: border-box;

        .goods-list {
          overflow-y: scroll;
          height: 199px;
          margin-right: -18px;

          //商品列表信息
          .goods-list-item {
            display: flex;
            flex-direction: row;
            height: 80px;
            margin: 10px 0;
            margin-left: 20px;
            .goods-img-box {
              width: 80px;
              height: 80px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .goods-img-detail {
              padding-left: 12px;
              box-sizing: border-box;
              line-height: 26px;
              .goods-name-text {
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }

          //无商品信息
          .show-no-goods {
            padding: 20px;
          }
        }
      }
      .content-right {
        width: 50%;
        border: 1px solid #ddd;
        box-sizing: border-box;
        line-height: 38px;
        padding-left: 10px;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        background-color: #fff;
        .strong {
          font-weight: bold;
        }
      }
    }
  }
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.no-data {
  padding: 16px 0;
  text-align: center;
  color: #909399;
  font-size: 15px;
  border-bottom: 1px solid #ddd;
}
</style>